import { acceptHMRUpdate, defineStore } from 'pinia';
import { ref } from 'vue';

interface Layer {
  id: string;
  name: string;
  visible: boolean;
  raw?: any;
}

export const useLayerStore = defineStore(
  'layer',
  () => {
    const layers = ref<Layer[]>([]);

    function addLayer(layer: Layer) {
      if (!layers.value.find((l) => l.name === layer.name)) {
        layers.value.push(layer);
      }
    }

    const setLayers = (newLayers: Layer[]) => {
      layers.value = newLayers;
    };

    const getLayers = (): Layer[] => {
      return layers.value;
    };

    function clearLayers() {
      layers.value = [];
    }

    // ✅ 计算属性：可见图层名称
    //从原始状态中派生新数据，并返回一个只读的响应式值  状态格式转换或过滤 状态的合并或聚合
    // const visibleLayerNames = computed(() => layers.value.filter((layer) => layer.visible).map((layer) => layer.name));

    return {
      layers,
      addLayer,
      getLayers,
      clearLayers,
      // visibleLayerNames // 暴露计算属性
    };
  },
  {
    // 开启持久化
    persist: true,
  },
);
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useLayerStore, import.meta.hot));
}
